<template>
  <div class="cropper-main">
    <div class="left-panel">
      <!-- <KanovaCom></KanovaCom> -->
      <KanovaImg :config="config" @setConfig="setConfig"></KanovaImg>
    </div>
    <div class="right-panel">
      <div @click="toolHandler">rote</div>
      <CropperTool @submitConfig="submitConfig" :config="config"></CropperTool>
    </div>
  </div>
</template>

<script setup lang="ts">
import KanovaCom from "../components/KanovaCom.vue";
import KanovaImg from "../components/KanovaImg.vue";
const config = ref({});
const toolHandler = () => {
  console.log("toolHandler");
};
function setConfig(data) {
  config.value = data;
}
const submitConfig = (data) => {
  config.value = data;
};
</script>

<style lang="scss" scoped>
.cropper-main {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  background-color: #fafafa;
  .left-panel {
    flex: 1;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .box_cropper {
      box-shadow: 0 3px 5px 1px #cfcfcf;
      border: 10px solid white;
      width: 400px;
      height: 400px;
    }
    .box_btn {
      margin-top: 20px;
    }
  }
  .right-panel {
    width: 450px;
    height: 100%;
    background: white;
  }
}
</style>
